<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    正在测试ajax的post封装
    <input type="button" value="post请求1" id="btn1">
    <input type="button" value="post请求2" id="btn2">
    <div id="box"></div>
</body>
<script>
    const obtn1 = document.getElementById("btn1")
    const obtn2 = document.getElementById("btn2")

    obtn1.onclick = function(){
        ajaxPost("http://localhost:3000/api", function(res){
            console.log(res)
        },{
            a:10,
            b:20,
            c:30,
            useranme:"admin"
        })
    }

    obtn2.onclick = function(){
        ajaxPost("http://localhost:3000/api", function(res){
            console.log(res)
        })
    }


    function ajaxPost(url, callback, data){
        data = data || {};
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        const xhr = new XMLHttpRequest();
        // open的第一个参数，为字符：post
        xhr.open("post",url);
        // 为了保证post数据能够被服务器正常解析，需要在发送数据之前，将post数据按照表单数据格式，进行发送
        // 设置请求头信息中的内容类型，为表单数据格式
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // post数据在send中发送
        xhr.send(str.slice(0,str.length-1));
        xhr.onload = function(){
            if(xhr.status === 200){
                callback(xhr.responseText);
            }
        }
    }



</script>
</html>